<template>
  <!-- 用户数据列表 -->
  <div class="table">
    <el-table ref="multipleTableRef" :data="userData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column property="id" label="合同编号" width="140" />

      <el-table-column property="name" label="合同名称" width="120" />

      <el-table-column property="address" label="客户名称" show-overflow-tooltip />
      <el-table-column property="money" label="合同金额" width="90" />
      <el-table-column property="ctstate" label="合同状态" width="90" />
      <el-table-column property="backmoney" label="已回款金额" width="100" />
      <el-table-column property="write" label="签订人" width="90" />


      <el-table-column label="合同时间" width="110">
        <template #default="scope">
          {{ scope.row.date }}
        </template>
      </el-table-column>

      <el-table-column label="到期时间" width="110">
        <template #default="scope">
          {{ scope.row.getdate }}
        </template>
      </el-table-column>
      <!-- <el-table-column property="set" label="操作" width="100"  @click="look" class="set" />
     -->
      <el-table-column label="操作" width="260">
        <template #default="scope">
          <el-button size="small">置顶</el-button>
          <el-button size="small" type="danger">编辑</el-button>
          <el-button size="small" type="danger" @click="setDialoglook(true)">查看</el-button>
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="100" />
    </div>
  </div>
</template>

<script setup lang="ts">

  import { reactive, ref,onMounted} from 'vue'
  import { FormInstance } from 'element-plus'
  import { userListApi } from '@/services/login'

  interface IProps {
    setDialoglook: (visible: boolean) => void
  }
  const props = defineProps < IProps > ()

  // type U{
  //   id: string
  //   name: string
  //   address: string
  //   money: number
  //   ctstate: string
  //   backmoney: number
  //   write: string
  //   date: string
  //   getdate: string
  //   set: string
  // }

  // 用户列表数据
  const userFormData = reactive({
    id: '',
    name: '',
    address: '',
    money: '',
    ctstate: '',
    backmoney: '',
    write: '',
    date: '',
    getdate: '',
    set: ''
  })

 

//请求用户列表数据
// let userData: User[]=[]
const userData = ref<any>()

  const loadData = async () => {
    let ret = await userListApi()
    if (ret.code === 0) {
      userData.value=ret.data.users
      
    }
  }
  onMounted(() => { 
  loadData()
})
 



  const multipleTableRef = ref < InstanceType < typeof ElTable >> ()
  const multipleSelection = ref < User[] > ([])

  const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
  }

  const look = () => {
    console.log('look');
  }


  // //用户表格数据
  // const tableData: User[] = [
  //   {
  //     id: 'YF20231121-001',
  //     name: 'CRM研发合同',
  //     address: '深圳研发科技有限公司',
  //     money: '88000',
  //     ctstate: '已审批',
  //     backmoney: '50000',
  //     write: '张三',
  //     date: '2016-05-03',
  //     getdate: '2023-11-21',
  //     set: '查看'

  //   },
  //   {
  //     id: 'YF20231121-001',
  //     name: 'CRM研发合同',
  //     address: '深圳研发科技有限公司',
  //     money: '88000',
  //     ctstate: '已审批',
  //     backmoney: '50000',
  //     write: '张三',
  //     date: '2016-05-03',
  //     getdate: '2023-11-21',
  //     set: '查看'

  //   },
  //   {
  //     id: 'YF20231121-001',
  //     name: 'CRM研发合同',
  //     address: '深圳研发科技有限公司',
  //     money: '88000',
  //     ctstate: '已审批',
  //     backmoney: '50000',
  //     write: '张三',
  //     date: '2016-05-03',
  //     getdate: '2023-11-21',
  //     set: '查看'

  //   },
  //   {
  //     id: 'YF20231121-001',
  //     name: 'CRM研发合同',
  //     address: '深圳研发科技有限公司',
  //     money: '88000',
  //     ctstate: '已审批',
  //     backmoney: '50000',
  //     write: '张三',
  //     date: '2016-05-03',
  //     getdate: '2023-11-21',
  //     set: '查看'

  //   },
  //   {
  //     id: 'YF20231121-001',
  //     name: 'CRM研发合同',
  //     address: '深圳研发科技有限公司',
  //     money: '88000',
  //     ctstate: '已审批',
  //     backmoney: '50000',
  //     write: '张三',
  //     date: '2016-05-03',
  //     getdate: '2023-11-21',
  //     set: '查看'

  //   },
  // ]
</script>

<style lang="scss" scoped>
  .table {
    height: 475px;
    background-color: #fff;
  }

  .table>.set {
    background-color: red;
  }

  .page {
    margin-top: 5px;
  }
</style>